﻿@model IEnumerable<BusinessLayer.ChatBoxUser>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section header{
    <h1>Welcome!</h1>
}
<!-- header zone -->

<!-- content zone -->

<div class="content">

    <div class="left">
        <img src="../../Content/img/boy.png" width="375" height="400">
    </div>
    <div id="JuniorChatBoxComponent" class="data">
        <div id="LogInSection">
            <label for="UserName">I am</label>
            <input id="UserName" />
            <input type="button" id="LogIn" value="LogIn" class="btn" disabled="disabled" />
            <div id="selectorError" style="display: none;">Username already exist</div>
            <br />

        </div>
        <label for="LoggedInUsersContainer">Users:</label>
        <ul id="LoggedInUsersContainer">
            @foreach (var u in Model)
            {
                <li class='left selectorUser' style="background-image: url(./../Content/img/characters/@u.IconUrl">u.Name.Substring(0, Math.Min(15, @u.Name.Length)) </li>
                <li class='left selectorUser' style="background-image: url(./../Content/img/@u.IconUrl">@u.Name.Substring(0, Math.Min(15, @u.Name.Length)) </li>
            }
        </ul>

        <div class="reset"></div>
        <br />

        <div id="ChatSection" style="display: none;">
            <hr>
            <br />
            <label for="UserInput">Type here</label>
            <input id="UserInput" />
            <input type="button" id="Send" value="Send" class="btn" disabled="disabled" />
            <br />
            <img src="../../Content/img/icoMsg.png" width="40" height="35">
            <label for="MessagesContainer">Messages:</label>
            <ul id="MessagesContainer">
            </ul>
        </div>
    </div>


    <div class="reset"></div>


</div>
<!-- content zone -->

<!-- footer zone -->
@section footer{
    <img src="../../Content/img/html5.png" width="180" height="210">
    <img src="../../Content/img/plus.png" width="130" height="210">
    <img src="../../Content/img/coffie.png" width="190" height="210">
    <img src="../../Content/img/equal.png" width="110" height="210">
    <img src="../../Content/img/heart.png" width="230" height="210">
}
<!-- footer zone -->

@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {

            $("#JuniorChatBoxComponent").juniorchatbox();

            //var myObject = new JuniorChatBox();
        });

    </script>
    <script id="user" type="text/x-jsrender">
        <li>
            <div class="left selectorUser" style="background-image: url(../../Content/img/{{:IconUrl}})">
               {{:Name}}
            </div>
        </li
    </script>

    <script id="message" type="text/x-jsrender">
        <li>
            <div class="selectorChatIcon" style="background-image: url(../../Content/img/{{:User.IconUrl}})">
               {{:User.Name}}:{{:Message}}
            </div>
        </li>
    
    </script>
}